<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <!--商品列表区-->
            <div class="mui-card" v-for="(item,i) in goodslist" :key="item.id">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                                   @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
                        <img src="http://img4.imgtn.bdimg.com/it/u=2304442145,3712165515&fm=26&gp=0.jpg" alt="手机缩略图">
                        <div class="info">
                            <h2>小米（MI）小米Note 16G双网通版</h2>
                            <p>
                                <span class="price">￥2199</span>
                                <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                <a href="#" @click="remove(item.id,i)">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--结算区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="red">{{$store.getters.getGoodsCountAndAmount["count"]}}</span>件，总价<span
                                class="red">￥{{$store.getters.getGoodsCountAndAmount["amount"]}}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>
        <p>{{this.$store.getters.getGoodsSelected}}</p>
    </div>
</template>

<script>
  import numbox from '../subcomponents/shopcar_numbox.vue'
  //按需导入
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        goodslist: []// 购物车中所有商品的数据
      }
    },
    methods: {
      getGoodsList() {
        var idArr = []
        this.$store.state.car.forEach(item => {
          idArr.push({"id": parseInt(item.id)})
        })
        // 如果 购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
        if (idArr.length <= 0) {
          return
        }
        // 获取购物车数据
        this.$http.get(this.COMMON.apiList['购物车页面数据'] + idArr.join(",")).then(response => {
          if (response.body.status === 0) {
            this.goodslist = result.body.message;
          } else {
            this.goodslist = idArr
            Toast('加载购物车数据失败')
          }
        })
      },
      remove(id, index) {
        // 点击删除，把商品从 store 中根据 传递的 Id 删除，同时，把 当前组件中的 goodslist 中，对应要删除的那个商品，使用 index 来删除
        this.goodslist.splice(index, 1);
        this.$store.commit("removeFormCar", id);
      },
      selectedChanged(id, val) {
        // 每当点击开关，把最新的 快关状态，同步到 store 中
        // console.log(id + " --- " + val);
        this.$store.commit("updateGoodsSelected", {id, selected: val});
      }
    },
    created() {
      this.getGoodsList()
    },
    components: {
      numbox
    }
  }
</script>

<style lang="scss" scoped>
    .shopcar-container {
        background-color: #eeeeee;
        overflow: hidden;
        .goods-list {
            .mui-card-content-inner {
                display: flex;
                align-items: center;
            }
            img {
                width: 60px;
                height: 60px;
            }
            h2 {
                font-size: 13px;
                padding-bottom: 5px;
            }
            p {
                padding: 5px 0;
            }
            .info {
                .price {
                    color: #ff0000;
                    font-weight: bold;
                }
            }
        }
        .jiesuan {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .red {
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
</style>